<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <div class="Mall4j hot-spot-container">
    <div
      v-for="(item, index) in config.imgList"
      :key="index"
      class="hot-imgs"
      :style="{width: config.size}"
    >
      <el-image
        :src="checkFileUrl(item.url)"
        fit="fill"
        style="width: 100%;height: 100%"
      />
      <span
        v-for="(sonItem, sonIndex) in item.activeBoxs"
        :key="sonIndex"
        :style="{
          width: sonItem.width * config.hotScale + 'px',
          height: sonItem.height * config.hotScale + 'px',
          transform: `translate(${sonItem.translateX * config.hotScale}px, ${sonItem.translateY * config.hotScale}px)`
        }"
        @click="handleClick(sonItem)"
      />
    </div>
  </div>
</template>
<script setup>
import { redirectPath } from '../common/pageConfig.js'

const props = defineProps({
  itemComponent: {
    type: Object,
    default: () => {}
  }
})

const config = ref({
  size: '100%',
  imgList: [],
  hotScale: 1
})

let windowWidth = 1920 // 实时屏幕宽度

watch(() => props.itemComponent, (newVal) => {
  if (newVal.type === 'universal_hotspot') {
    if (JSON.stringify(newVal.rightConfigMessage) !== '{}') {
      let scale
      if (newVal.rightConfigMessage.size === 1200) {
        scale = 1200
      } else {
        scale = windowWidth
      }
      config.value = {
        size: newVal.rightConfigMessage.size === 1200 ? newVal.rightConfigMessage.size + 'px' : '100%',
        imgList: newVal.rightConfigMessage.imgList,
        hotScale: scale / 500
      }
    }
  }
}, {
  immediate: true,
  deep: true
})

watch(() => windowWidth, (val) => {
  config.hotScale = val / 500
  config.imgList = props.itemComponent.rightConfigMessage.imgList
})

onMounted(() => {
  window.onresize = () => {
    return (() => {
      windowWidth = document.documentElement.clientWidth // 宽
    })()
  }
})

const router = useRouter()
// 热区点击
const handleClick = (item) => {
  const params = {
    path: {
      type: item.type,
      link: item.link
    }
  }
  redirectPath(router, params)
}

</script>
<style lang="scss" scoped>
.hot-spot-container {
  width: 100%;
  min-width: 1200px;
  height: 100%;
}

.hot-spot-container .hot-imgs {
  margin: 0 auto;
  position: relative;
}

.hot-spot-container .hot-imgs span {
  display: block;
  position: absolute;
  top: 0;
}
</style>
